<script setup lang="ts">
import { useRouter } from "vitepress";
import { hooks } from "../.vitepress/utils/sortHooks";
import { useData } from "../components/wordcloud/data";

const { go } = useRouter();
const { hooksLen, utilsLen } = useData();
</script>

<template>
  <naive-theme>
    <n-space vertical>
      <div className="flex items-center">
        <n-tag type="info">
          <n-number-animation :from="0" :to="hooksLen" /> 个
          <n-tooltip trigger="hover">
            <template #trigger>
              <n-button
                text
                type="primary"
                @click="go(`/hooks/${hooks[0]}/${hooks[0]}`)"
              >
                Hooks
              </n-button>
            </template>
            点击查看hooks方法
          </n-tooltip>
          、
          <n-number-animation :from="0" :to="utilsLen" /> 个
          <n-tooltip trigger="hover">
            <template #trigger>
              <n-button text type="primary" @click="go('/utils/amount/amount')">
                Utils
              </n-button>
            </template>
            点击查看utils工具
          </n-tooltip>
        </n-tag>
        <a
          href="https://www.npmjs.com/package/@pureadmin/utils"
          target="__blank"
          className="ml-1 mr-1"
        >
          <img
            alt="NPM version"
            src="https://img.shields.io/npm/v/@pureadmin/utils?color=a1b858&label="
          />
        </a>
        <a
          href="https://www.npmjs.com/package/@pureadmin/utils"
          target="__blank"
        >
          <img
            alt="NPM Downloads"
            src="https://img.shields.io/npm/dm/@pureadmin/utils?color=50a36f&label="
          />
        </a>
      </div>
    </n-space>
  </naive-theme>
</template>
